<!DOCTYPE html>
<html lang="en">
<style>

.chart {

}

.chart rect {
    fill: steelblue;
}

.chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: end;
}


    
</style>
<svg class="chart"></svg>


<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
    var d = [4, 8, 15, 16, 23, 42];

    var width=420, barHeight=40;
    var height = d.length * barHeight;
    var x = d3.scale.linear().domain([0, d3.max(d)]).range([0, width]);
    
    var g = d3.select(".chart").attr("width", width).attr("height", height).selectAll("g").data(d).enter().append("g").attr("transform", function (d, i) {
        return "translate(0, " + (barHeight * i) + ")";
    });

    g.append("rect").attr("width", x).attr("height", barHeight - 1);
    g.append("text").attr("x", function(d){return x(d) - 3;}).attr("y", (barHeight - 1) / 2).attr("dy", "3.5").text(function(d){return d;});
</script>